import { IconCaretRight } from '@arco-design/web-react/icon'
import React, { PureComponent } from 'react'

interface IProps {
  cover?: string
  album?: string
  artist?: string
  releaseDate?: string
  onClick?: () => void
  onClickArtist?: () => void
  onPlay?: () => void
}

export default class CardSong extends PureComponent<IProps> {
  constructor(props: IProps) {
    super(props)
    this.state = {}
  }
  render() {
    const { cover, album, artist, releaseDate, onClick, onClickArtist, onPlay } = this.props

    return (
      <div className={"w-full relative select-none hover:bg-primary-600/[.06] p-1 rounded-md hover:shadow-lg hover:scale-90 duration-100 ease-in-out"}>
        <div className={"cursor-pointer h-32 mb-2 relative group overflow-hidden rounded-sm"}>
          <img
            style={{ width: '100%' , height: '100%'}}
            alt='dessert'
            src={cover}
          />
          <div onClick={onPlay} className={"opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out z-30 w-12 h-6 bg-primary-600 active:bg-primary-700 absolute bottom-1 left-1 text-center rounded-2xl"}><IconCaretRight style={{ fontSize: '24px', color: '#d5d5fa' }} /></div>
          <div onClick={onClick} className={"absolute top-0 left-0 w-full h-full bg-black opacity-0 group-hover:opacity-60 group-hover:backdrop-blur transition-opacity duration-300 ease-in-out"}></div>
        </div>
        <div className={"text-xs text-gray-500 "}>
          <span onClick={onClick} className={"text-gray-700 text-sm cursor-pointer hover:text-primary-600 active:text-gray-700"}>{album}</span><br/>
          <span onClick={onClickArtist} className={"cursor-pointer hover:text-primary-600 active:text-gray-700"}>{artist}</span><br/>
          <span className={"active:text-gray-700"}>{releaseDate}</span>
        </div>
      </div>
    )
  }
}
